Langages HTML et CSS

WWW

Premiers pas...


Option ISN - Lycée St Exupéry

Quelques termes :

  • Internet
  • WWW
  • HTML

Internet

Internet désigne le réseau informatique mondial physique accessible au public, composé des réseaux publics, privés, universitaires, commerciaux, ...

Internet
L'accès à internet peut-être obtenu par des FAI (fournisseurs d'accès internet) via ADSL, fibre, cable, satellite, 3G+, etc.

World Wide Web

Signifiant "la toile d'araignée mondiale", le WWW ou "le web", désigne l'ensemble des informations contenues sur les machines du réseau et la manière de communiquer entre elles. WWW

Le web est une application du réseau internet parmi d'autres (mail, messagerie instantanée, partage de fichiers P2P, streaming vidéo, etc.).

HyperText Markup Language

Le HTML est un langage de balisage de "fichiers hypertextes", aujourd'hui appelés pages web.

WWWWWW
On visualise les fichiers HTML avec des navigateurs web comme Browsers

Pourquoi apprendre le HTML ?

  • Universel et Unique
  • Ctrl + U : HTML est transparent

Documents hypertextes

hypertexte   graphe site   graphe web  
  • Les pages HTML sont du texte "enrichi"
  • Les liens hypertexte permettent de passer d'une page à une autre

Une page HTML vue par

un codeur

notepad notepad ++

Avec un éditeur de texte (Notepad++, Vim, Emacs, Eclipse, etc.)

un utilisateur

notepad

Avec un navigateur (Firefox, Chrome, etc.)

Le HTML est un langage de balises

  • Une balise HTML est un élément de texte (un nom) encadré par le caractère inférieur (<) et le caractère supérieur (>).
    par exemple, <h1>
  • Une balise ouverte doit (presque) toujours être refermée.
    par exemple, <h1> du texte </h1>
  • Il existe de nombreuses balises pour mettre en forme et enrichir le texte.
    par exemple, <h1>, <h2>, <i> <b> <u> <img> <video> , etc.
Des balises de mise en forme du texte telles que <i>, <b>, <u> permettent de mettre une partie du texte en gras, italique, souligné,... 

Une partie en <b> gras </b> et une en <i> italique </i>
 Une partie en gras et une en  italique 

Une partie en <u> <i> italique </i> et tout est souligné </u>
 Une partie en italique et tout est souligné
Le HTML permet de structurer les pages pour mieux faire ressortir les titres, les sous-titres, les paragraphes, les listes, les citations, etc. 


<h1> Mon titre </h1>
<h2> Un sous-titre </h2>
<p> Mon premier paragraphe est très important </p>
<p> 
  Le deuxième paragraphe est plus long et il contient 
  une liste : 
   <ul> 
      <li> point 1</li>
      <li> point 2</li>
   </ul>
</p>
Le HTML permet d'enrichir du texte : 


<img src='images/pacman.jpg' alt='pacman' />
							

<img src='http://deviantart.com/art/pacman.jpg' 
			alt='pacman' />
							

<img src='C:/monsite/images/pacman.jpg' alt='pacman' />

 

Depuis la version 5 du HTML, il est possible d'intégrer facilement une vidéo : 


<video width="200" height="300" controls="controls" 
	autoplay="true">
  <source src="minestorm.mp4" type="video/mp4" />
  <source src="minestorm.webm" type="video/webm" />
  <source src="minestorm.ogg" type="video/ogg" />
  Ecrire une alternative à la vidéo
</video>

Sans lien, pas de web :

 

felins.html :


								... visitez <a href='chiens.html'> notre site sur les canidés</a> ...
...<a href='http://www.30millionsdamis.fr'> 30millionsdamis.fr</a> ...

chiens.html


								... préférer les <a href='felins.html'> <img src='images/tete_chat.png' /> </a>
Structure générale d'une page WEB : 

<!DOCTYPE html>
<html>       	    <!-- Marque le début du document HTML -->
	<head>       <!-- Marque le début de la zone d'en-tête -->
	    <meta charset="utf-8" />
	    <title>Titre de la page</title>    <!-- Titre du document -->
	</head>      <!-- Marque la fin de la zone d'en-tête -->
	
	<body>       <!-- Marque le début du corps de la page -->
	...
	</body>      <!-- Marque la fin du corps de la page -->
</html>      	    <!-- Marque la fin du document HTML -->
  • L'essentiel du site se trouvera entre les balises body.
  • Il est important d'indenter pour mieux visualiser son code.
  • En cas d'oubli, le navigateur affiche quand même ce qu'il peut

La CSS habille le HTML

CSS
  • Mise en forme (police, taille du texte, style, ...)
  • Positionnement, mise en page,...
  • Séparation du fond et de la forme

Syntaxe CSS

Code HTML : 



<h1> Mon titre 1</h1>
<p> texte texte texte ... </p>
<h1> Mon titre 2 </h1>
<p> texte texte texte ...</p>

Code CSS : 


background-color : #2A17B7;
color : white;
font-size : 20px;
font-family : darkmoon;

Rendu navigateur :

 

Il y a plusieurs manières de placer son code CSS ...

... dans les balises HTML avec l'attribut style


Code HTML : 



<h1 style = "background-color : #2A17B7;
            color : white;
            font-size : 20px;
            font-family : darkmoon;"> 
   Mon titre 1
</h1>
<p> texte texte texte ...</p>
<h1> Mon titre 2 </h1>
<p> texte texte texte ...</p>

Rendu navigateur :

 

Méthode lourde, à éviter...

... dans le HEAD en précisant les balises concernées :

Code HTML : 


<html>
  <head>
    <style>
      h1{
      background-color : #2A17B7;
      color : white;
      font-size : 3em;
      font-family : darkmoon;
      }
    </style>
  </head>
  <body>
    <h1> Mon titre 1</h1>
    <p> texte texte texte ...</p>
    <h1> Mon titre 2 </h1>
    <p> texte texte texte ...</p>
  </body>
</html>

Rendu navigateur :

 

Pas encore tout à fait séparés...

... dans un fichier .CSS séparé :

fichier HTML : 


<html>
  <head>
    <link rel="stylesheet" href="monstyle.css">
  </head>
  <body>
    <h1> Mon titre 1</h1>
    <p> texte texte texte ...
    <h1> Mon titre 2 </h1>
    <p> texte texte texte ...</p>
  </body>
</html>

fichier CSS : 


body{
background : white;
}
h1{
background-color : #2A17B7;
color : white;
font-size : 3em;
font-family : darkmoon;
}

 

Dossier du site

Formater certains éléments avec l'attribut class

code HTML : 


<p class='def'>
La cocotte minute est un 
oiseau rapide.
</p>

<p class='theorem'>
Le carré de l'hypothénuse 
est égal à quelque chose...
</p>

<p class='theorem'>
Si le A est faux, et B est vrai,
alors A ou B est vrai. 
</p>

code CSS : 


p.theorem{
background-color : #EE4444;
font-style: italic;
border-style:dashed;
border-width:1px;
margin-left : 10px;
}

p.def{
background-color : #4444EE;
font-weight: bold;
padding : 10px;
}

Rendu :

Formater un élément précis avec l'attribut id

code HTML : 


<p class='def'>
La cocotte minute est un 
oiseau rapide.
</p>

<p class='theorem'>
Le carré de l'hypothénuse 
est égal à quelque chose...
</p>

<p id='th_logique_1' class='theorem'>
Si le A est faux, et B est vrai,
alors A ou B est vrai. 
</p>

code CSS : 


p.theorem{
background-color : #EE4444;
font-style: italic;
border-style:dashed;
border-width:1px;
margin-left : 10px;
}

p#th_logique_1{
border-style:solid;
border-width:4px;
border-color:red;
}

Rendu :

 

L'attribut class est fait pour représenter plusieurs éléments, mais l'attribut id n'en représente qu'un seul.

Quelques liens utiles

Tutoriels HTML/CSS :

Liens utiles :

Ressources libres :

Ce que l'ont peut faire avec HTML5/CSS3 (et un peu de JS aussi...)

THE END

option ISN - Lycée Saint Exupéry